<route lang="json5" type="page">
  {
    "name": "calculator",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "default",
      "enablePullDownRefresh": false,
      "navigationBarBackgroundColor": "#F8F8F8",
      "navigationBarTitleText": "计算器",
    }
  }
</route>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import {
  buttonRows,
  clearHistory,
  currentExpression,
  deleteHistoryItem,
  deleteLastChar,
  display,
  formula,
  handleButtonClick,
  history,
  loadHistoryFromStorage,
  result,
  showHistory,
  showHistoryInDisplay,
  toggleHistory,
  toggleHistoryInDisplay,
  useHistoryItem,
} from './index'

// 页面加载时恢复历史记录
onMounted(() => {
  loadHistoryFromStorage()
})

// 页面卸载时清空历史记录
onUnmounted(() => {
  clearHistory()
})

// 处理历史记录项点击
function handleHistoryItemClick(item: any) {
  useHistoryItem(item)
}

// 处理删除历史记录项
function handleDeleteHistoryItem(item: any) {
  deleteHistoryItem(item.id)
}

// 处理清空历史记录
function handleClearHistory() {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空所有历史记录吗？',
    success: (res) => {
      if (res.confirm) {
        clearHistory()
      }
    },
  })
}
</script>

<template>
  <view class="calculator-container">
    <!-- 显示屏区域 -->
    <view class="display-area">
      <!-- 历史记录在显示区域内 -->
      <view v-if="showHistoryInDisplay" class="history-in-display">
        <view class="history-header-inline">
          <text class="history-title-inline">
            最近记录
          </text>
          <view class="close-history" @tap="toggleHistoryInDisplay">
            <wd-icon name="close" size="18px" />
          </view>
        </view>
        <scroll-view
          v-if="history.length > 0"
          class="history-list-inline"
          scroll-y
        >
          <view
            v-for="item in history"
            :key="item.id"
            class="history-item-inline"
            @tap="handleHistoryItemClick(item)"
          >
            <view class="history-card">
              <view class="history-expression-inline">
                {{ item.expression }}
              </view>
              <view class="history-result-inline">
                {{ item.result }}
              </view>
              <view class="history-time-inline">
                {{ item.timestamp.split(' ')[1] }}
              </view>
            </view>
          </view>
        </scroll-view>
        <view v-else class="history-empty-inline">
          <wd-icon name="clock-outlined" size="48px" color="#ccc" />
          <text class="empty-text-inline">
            暂无计算记录
          </text>
        </view>
      </view>

      <!-- 正常显示区域 -->
      <view v-else class="display-content">
        <!-- 公式显示区 -->
        <view class="formula-section">
          <view class="formula-display" :class="{ visible: formula }">
            {{ formula || '0' }}
          </view>
        </view>

        <!-- 结果显示区 -->
        <view class="result-section">
          <view class="result-display" :class="{ visible: result, small: result.length > 8 }">
            {{ result }}
          </view>
        </view>

        <!-- 右侧按钮组 -->
        <view class="display-buttons">
          <!-- 历史记录按钮 -->
          <view class="display-btn" @tap="toggleHistoryInDisplay">
            <wd-icon name="history" size="18px" color="#f0883a" />
          </view>
          <!-- 删除按钮 -->
          <view class="display-btn" @tap="deleteLastChar">
            <wd-icon name="keyboard-delete" size="18px" color="#fa4350" />
          </view>
        </view>
      </view>
    </view>

    <!-- 按钮区域 -->
    <view class="buttons-area">
      <view
        v-for="(row, rowIndex) in buttonRows"
        :key="rowIndex"
        class="button-row"
      >
        <view
          v-for="(button, buttonIndex) in row"
          :key="buttonIndex"
          class="button"
          :class="[button.class]"
          @tap="handleButtonClick(button)"
        >
          {{ button.text }}
        </view>
      </view>
    </view>

    <!-- 历史记录弹窗 -->
    <wd-popup
      v-model:visible="showHistory"
      position="right"
      :safe-area-inset-bottom="true"
      custom-style="width: 90%; height: 100%;"
    >
      <view class="history-popup">
        <!-- 历史记录头部 -->
        <view class="history-header">
          <view class="history-title">
            计算历史
          </view>
          <view class="history-actions">
            <wd-button
              v-if="history.length > 0"
              type="error"
              size="small"
              round
              @click="handleClearHistory"
            >
              清空记录
            </wd-button>
            <wd-button type="primary" size="small" round @click="toggleHistory">
              关闭
            </wd-button>
          </view>
        </view>

        <!-- 历史记录列表 -->
        <scroll-view
          v-if="history.length > 0"
          class="history-list"
          scroll-y
          enable-flex
        >
          <view
            v-for="item in history"
            :key="item.id"
            class="history-item"
            @tap="handleHistoryItemClick(item)"
          >
            <view class="history-content">
              <view class="history-expression">
                {{ item.expression }}
              </view>
              <view class="history-result">
                = {{ item.result }}
              </view>
              <view class="history-time">
                {{ item.timestamp }}
              </view>
            </view>
            <view class="history-delete" @tap.stop="handleDeleteHistoryItem(item)">
              <wd-icon name="delete-outlined" size="18px" color="#ff4757" />
            </view>
          </view>
        </scroll-view>

        <!-- 空状态 -->
        <view v-else class="history-empty">
          <view class="empty-icon">
            <wd-icon name="clock-outlined" size="80px" color="#e0e0e0" />
          </view>
          <text class="empty-title">
            暂无计算记录
          </text>
          <text class="empty-desc">
            开始计算后记录会显示在这里
          </text>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped lang="scss">
@import "./index.scss";
</style>
